<template>
  <div class="organize" v-loading="loading">
    <div class="left" v-if="curData.hasOwnProperty('children')">
      <div class="lt-header">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <slot name="search"></slot>
      </div>
      <div class="dis20"></div>

      <el-tree
        :data="data"
        :default-expanded-keys="defaultID"
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        :accordion="true"
        :expand-on-click-node="false"
        @node-expand="parentNode"
        @node-click="parentNode"
      ></el-tree>
    </div>
    <div class="right" v-if="curData.hasOwnProperty('children')">
      <slot name="content" :data="curData"></slot>
      <slot name="operate"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["api", "params", "hiddenNum"],
  methods: {
    createData(childArr) {
      this.curData = [];
      this.curData = childArr;
      this.$emit("getCurData", this.curData.children || this.curData);
    },
    // 非最下级菜单
    parentNode(cur) {
      this.curItemID = cur.id;
      this.$refs.tree.store.nodesMap[cur.id].expanded = true;
      this.$emit("getOrgId", this.curItemID);
      this.createData(cur);
    },
    // 获取组织信息
    getDepart() {
      this.loading = true;
      let params = {};
      let url = this.api || "depart.get_depart";
      let p = this.params || params;
      this.$api.jget(url, p).then(res => {
        if (res.status === 1 && res.data) {
          this.data = res.data;
          this.defaultID = [this.data[0].id];
          this.createData(this.data[0]);

          this.curItemID = this.data[0].id;
          this.$emit("getOrgId", this.curItemID);
        } else {
          this.$notify({
            title: "提示",
            message: res.msg,
            type: "error",
            customClass: "notify-center"
          });
        }
        this.loading = false;
      });
    },
    // 过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 自定义渲染树状图
    renderContent(h, { node, data, store }) {
      let html;
      let title = "";
      if (this.params.order_by) {
        title = `(${data[`${this.params.order_by}_num_total`] ||
          data[`${this.params.order_by}_count_num_total`] ||
          0})`;
      } else {
        title = `(${data[`aliyun_ecs_num_total`] ||
          data[`aliyun_ecs_count_num_total`] ||
          0})`;
      }

      if (this.hiddenNum) {
        title = "";
      }
      html = h(
        "span",
        {
          class: "render",
          attrs: { title: `${node.label}${title}` }
        },
        [
          h("span", [
            h("span", node.label),
            h("span", { class: "font-gray" }, `${title}`)
          ])
        ]
      );
      return html;
    }
  },
  data() {
    return {
      curData: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      filterText: "",
      defaultID: [],
      curItemID: [], // 选择的节点，用于云计算获取类型
      lastNode: false,
      loading: false
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    order_by: {
      handler(newV) {
        this.getDepart();
      }
    },
    params: {
      handler(val) {
        this.getDepart();
      },
      deep: true
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/.organize {
  display: flex;
  height: 100%;
  background-color: #fff;
  .left {
    height: 100%;
    width: 320px;
    padding: 30px 20px;
    border-right: 1px solid #ddd;
    .lt-header {
      display: flex;
    }
    & > .el-tree {
      height: calc(100% - 40px);
      overflow: auto;
    }
    .render {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: calc(100% - 14px);
      white-space: normal;
      word-break: break-all;
      display: inline-block;
    }
  }
  .right {
    height: 100%;
    width: calc(100% - 320px);
    padding: 30px 20px 20px 20px;
    overflow: auto;
    position: relative;
  }
  .h55 {
    height: 55%;
  }
  .el-tree-node__content {
    height: auto;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}
.buttons {
  display: flex;
  & > button {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
    padding: 8px 10px;
  }
}
</style>